<template>
	<div id="content">
		<div class="header">
			<div>
				<van-icon name="manager-o" />
			</div>
			<div><span>动态</span><span>附近</span></div>
			<div>
				<van-icon name="bar-chart-o" />
			</div>
		</div>
		<van-row class="columns">
			<van-col span="12">
				<van-icon name="records" />发动态
			</van-col>
			<van-col span="12">
				<van-icon name="desktop-o" />发布视频
			</van-col>
		</van-row>
		<div class="title">
			<h3>热门话题<span>></span></h3>
			<div class="show">
				<van-image
					src="http://p1.music.126.net/y0P2QCRY4-C3qYWifMp5kA==/109951168016199398.jpg?imageView&quality=89" />
				<van-image
					src="http://p1.music.126.net/x4VLZXtMa-pYSOh_WX7JPw==/109951168016127621.jpg?imageView&quality=89" />
				<van-image
					src="http://p1.music.126.net/GpcES-CIrJz8Tlv0xNFsHw==/109951168016147320.jpg?imageView&quality=89" />
				<van-image
					src="http://p1.music.126.net/ApokE3v627QxUsxwSt1ZqQ==/109951168016164423.jpg?imageView&quality=89" />
			</div>

		</div>
		<div class="comments">
			<van-row>
				<van-col span="8">
					<van-button>云村星评馆</van-button>
				</van-col>
				<van-col span="12"></van-col>
				<van-col span="4">
					<van-button icon="arrow" icon-position="right" text="更多" size="mini" round to='/' />
				</van-col>
			</van-row>
			<van-swipe class="hotsong-swipe" :autoplay="5000" :loop="true" :show-indicators="false">
				<van-swipe-item v-for="item, index in list" :key="index">

					<div>
						<div>
							<van-image width="40" height="40" :src="item.url" />
							{{ item.name }} —— {{ item.user }}
						</div>
						<p>精彩评论：{{ item.detal }}</p>
					</div>

				</van-swipe-item>
			</van-swipe>
			<van-row>
				<van-col span="8">
					<van-button>动态</van-button>
				</van-col>
				<van-col span="4" offset="12">
					<van-button icon="arrow" icon-position="right" text="更多" size="mini" round to='/' />
				</van-col>
			</van-row>
			<div class="dynamic" v-for="item, index in recommendList">
				<div class="top">
					<img :src="item.tailMark.circle.imageUrl">
					<img :src="item.user.avatarDetail.identityIconUrl">
					<div>{{ item.user.nickname }}</div>
				</div>
				<div class="copy">
					<!-- <input type="checkbox" class="exp" id="exp+{{index}}">
					<div class="text"> 
						<label class="btn" for=`exp${index}`></label>
						{{ item.info.commentThread.resourceInfo.name }}

					</div> -->
	                <input type="checkbox" class="exp" :id="item.info.commentThread.resourceInfo.name">
					<div class="text"> 
						<label class="btn" :for="item.info.commentThread.resourceInfo.name "></label>
						{{ item.info.commentThread.resourceInfo.name }}

					</div>


				</div>
				<a class="definition" :href="item.bottomActivityInfos.h5Target">#{{ item.bottomActivityInfos.name }}</a>
				<van-swipe lazy-render class="imageShow" :width="220" :loop="false" :show-indicators="false">
					<van-swipe-item v-for="itemone in item.pics">
						<img :src="itemone.originUrl">
					</van-swipe-item>
				</van-swipe>
				<van-row>
					<van-col span="8">
						<van-icon name="share-o" />{{ item.info.shareCount }}
					</van-col>
					<van-col span="8">
						<van-icon name="chat-o" />{{ item.info.commentCount }}
					</van-col>
					<van-col span="8">
						<van-icon name="good-job-o" />{{ item.info.likedCount }}
					</van-col>
				</van-row>

			</div>
		</div>
		<div class="bottom"></div>
	</div>
</template>

<script setup lang="ts">
import type { isTemplateNode } from '@vue/compiler-core'
import { ref, reactive } from 'vue'
import { RequestEvent } from "@/api/recommend"


// 获取动态数据
let recommendList = ref([]);
// <<<<<<< HEAD
// let getrecommend = async () => {
// 	const res = await RequestEvent()
// 	console.log(res.data);
// 	console.log("res.data.event>>>", res.data.event);
// 	console.log(1);
// 	console.log("recommendList.value>>>", recommendList.value);
// 	// 渲染操作
// 	if (res.data.code == 200) {
// 		recommendList.value.push(...res.data.event);
// 	}
// 	else {

// 	}
// 	console.log(2);
// 	console.log("recommendList.value>>>", recommendList.value);
// }

// getrecommend()
// =======
let getrecommend = async()=>{
	const res = await RequestEvent(30)
	console.log(res);
	console.log(res.data);
	console.log("res.data.event>>>",res.data.event);
	console.log(1);
	console.log("recommendList.value>>>",recommendList.value);
	// 渲染操作
    recommendList.value.push(...res.data.event);
	console.log(2);
	console.log("recommendList.value>>>",recommendList.value);
}

getrecommend()
// >>>>>>> 13ddacea5b23e77e833064c2ddbb404d28913937
const list = ref([
	{
		detal: '又是一年的情人节。街上，又多了多少对拥吻的人。在这个独自度过的节日里，唯独开心的，就是听安安和冷鸟的新歌。期待着下一个情人节，身边多一个人。',
		url: 'http://p2.music.126.net/LwgJ6NdBsBmSktB4oAXKlw==/109951167138521678.jpg?param=130y130',
		name: '还是你的笑容最可爱',
		user: '音阙诗听 / 泠鸢yousa / 王梓钰'
	},
	{
		detal: "北京有歌曲北京，北京，成都有歌曲，成都，上海有歌曲夜上海，而我们，拉萨有歌曲，坐着火车去拉萨，西安有歌曲，西安人的歌，而我们浙江，只有江南皮革厂倒闭了，江南皮革厂倒闭了，，，",
		url: 'http://p2.music.126.net/Z3tZpTE9f-c8O2euwtYP_g==/109951167321158143.jpg?param=130y130',
		name: '西安人的歌',
		user: '范炜与程渤智'
	},
	{
		detal: "小时候没有手机，每天守在电视机前面看动画片好像就很幸福了。我记得当时最喜欢看的就是七点放的动画梦工厂，看完就睡觉。八点的银河剧场对我来说就是奢望。现在想看什么一搜就出来了，却再也没有当时守电视机那种期待的感觉了",
		url: 'http://p3.music.126.net/SmWtUOfjIwTnTXMZ9X16WA==/109951166567443017.jpg?param=200y200',
		name: '你从未离去',
		user: '白挺'
	},
	{
		detal: "裙子不是原罪，美丽不是她的错愿每个女孩都能被这个世界温柔以待“我花了十年去教我的女儿学会保护自己，你为什么不肯花一分钟教你儿子学会尊重女性”男孩子也要学会尊重女性所有“房思琪”请别害怕，你的身后还有万丈光芒，为你亮起！",
		url: 'http://p1.music.126.net/YVdUq-VX1TJW_8u3EKAs5g==/109951164545953099.jpg?param=130y130',
		name: '负重一万斤长大',
		user: '太一'
	},
	{
		detal: "“生不得情浓，死不得善终。刚烈女子，命如薄纸。”自古红颜多薄命，王庭公侯欲谈情爱实属奢侈。可惜了，这一位刚烈女子------朱淑真，被封建的桎梏纠缠至死。",
		url: 'http://p2.music.126.net/URS71NtabgvyRJ4sZRiDaQ==/109951163830485367.jpg?param=177y177',
		name: '刚烈女子',
		user: '锦零'
	}
])

const dynamicList = ref([
	{
		info: {commentThread:{
			resourceInfo:{
                name: "I’m enchanted to announce my next tour: Taylor Swift | The Eras Tour, a journey through the musical eras of my career (past and present!) The first leg of the tour will be in stadiums across the US, with international dates to be announced as soon as we can! Feeling like the luckiest person alive because I get to take these brilliant artists out on tour with me: paramore, beabadoobee, Phoebe Bridgers, girl in red, Muna, HAIM, Gracie Abrams, Gayle and Owenn. I can’t WAIT to see your gorgeous faces out there. It’s been a long time coming 🥰[图片]"
			},
		},
		likedCount: '1205',commentCount: '81',shareCount: '49',
		},

		tailMark:{circle:{imageUrl: "https://p5.music.126.net/obj/w5vCgsKQw6PCn2vCn8Kz/18126518137/b575/2022729172246/t9unznvccd2uqyjjpbctf.jpg"}},
		user:{nickname: "TaylorSwift",avatarDetail:{identityIconUrl: "https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4788940880/1a1f/68f5/b59a/b444b81b88567108ba88194fa29144f5.png"}},
		bottomActivityInfos:{name: "TaylorSwift的云圈",h5Target: "https://music.163.com/st/circle/pages/index/index.html?circleId=0102925DAD4DF667DD9F62E63BA9FABEEB20",},
		pics: [
			{ originUrl: "http://p1.music.126.net/LBI2A-PlOE6wfIwBj-xNGQ==/109951168023235173.jpg", },
			{ originUrl: "http://p1.music.126.net/ktX-lmm3pDCyqI0mH0MBhg==/109951168023239500.jpg", }
		],
	},
	{
		info: {commentThread:{
			resourceInfo:{
                name: "本周社区关键词：挖野菜🥬\n听说村民们正在为王宝钏和薛平贵谁是恋爱脑展开了激烈的battle...\n还有猝不及防的狗粮：别人家男朋友解决冷战的方式也太甜了吧！\n...\n这些都在社区周报第三期！\n如果你想了解云村本周新鲜事，就快来阅读社区周报！\n如果你也想上榜，更要来阅读社区周报！"
			},
		},
		likedCount: '154',commentCount: '14',shareCount: '2',
		},

		tailMark:{circle:{imageUrl: "http://p1.music.126.net/fL9ORyu0e777lppGU3D89A==/109951167206009876.jpg"}},
		user:{nickname: "网易云音乐",avatarDetail:{identityIconUrl: "https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4788940880/1a1f/68f5/b59a/b444b81b88567108ba88194fa29144f5.png"}},
		bottomActivityInfos:{name: "网易云音乐的云圈",h5Target: "https://music.163.com/st/circle/pages/index/index.html?circleId=0102EEA799A8A0E1785ACA75A8FB92330756",},
		pics: [
			{ originUrl: "http://p1.music.126.net/nLac2TxsPgxQlU1lhEkqnA==/109951168026738664.jpg"},
			{ originUrl: "http://p2.music.126.net/6oHOuTyp6A2Bvh0G4-bTWg==/109951167728087046.jpg?param=200y200"}
		],
	},
])
recommendList.value.push(...dynamicList.value)

</script>

<style scoped>
#content {
	background-color: rgb(238, 239, 240);
}

#content .header {
	display: flex;
	background-color: rgb(211, 7, 7);
	padding: 10px 0;
	color: #fff;
}

#content .header div {
	flex: 1;
}

#content .header div:nth-of-type(1) {
	margin-left: 10px;
}

#content .header div:nth-of-type(2) {
	display: flex;
	border-radius: 10px;
	border: 2px solid #fff;
}

#content .header div:nth-of-type(2) span:nth-child(1) {
	display: block;
	width: 50%;
	border-radius: 10px;
	background-color: rgb(211, 7, 7);
	text-align: center;
	font-size: 14px;
	line-height: 24px;
}

#content .header div:nth-of-type(2) span:nth-child(2) {
	display: block;
	width: 50%;
	border-radius: 10px;
	background-color: #fff;
	text-align: center;
	line-height: 24px;
	color: rgb(211, 7, 7);
	font-size: 14px;
}

#content .header div:nth-of-type(3) {
	display: flex;
	justify-content: flex-end;
	padding-right: 10px;
}

#content .columns {
	background-color: rgb(255, 255, 255);
	margin-bottom: 6px;
}

#content .columns .van-col {
	text-align: center;
	font-size: 16px;
	height: 36px;
	line-height: 36px;
	border-right: 1px solid rgb(239, 240, 241);
}

#content .columns .van-row div:nth-of-type(1) .van-button {
	background-color: rgb(141, 94, 74);
}

#content .columns .van-col i {
	color: rgb(211, 7, 7);
	font-size: 20px;
}

#content .title {
	padding-top: 5px;
	background-color: rgb(157, 103, 75);
}

#content .title h3 {
	font-size: 14px;
	font-weight: 600;
	padding-left: 10px;
}

#content .title h3 span {
	display: inline-block;
	font-size: 20px;
	margin-left: 5px;
}

#content .title .show {
	margin-left: 10px;
	white-space: nowrap;
	overflow: hidden;
}

#content .title .show .van-image {
	width: 146px;
	height: 73px;
}

#content .comments {
	background-image: linear-gradient(to bottom right, rgb(157, 103, 75), rgb(64, 51, 71));

}

#content .comments .van-button:nth-of-type(1) {
	border: 0;
	background-color: rgb(132, 89, 74);
}

#content .comments .van-row:nth-of-type(1) .van-button {
	background-color: rgb(141, 94, 74);
}

#content .comments .van-swipe .van-swipe-item>div {
	width: 90%;
	margin: 0 auto;
	border-radius: 8px;
	/* border: 1px solid rgb(238, 239, 240); */
	background-color: rgb(165, 116, 85);
	padding: 5px;
	font-size: 10px;
}

#content .comments .van-swipe-item>div>div {
	font-family: NSimSun;
}

#content .comments .van-swipe-item>div>p {
	font-family: SimSun;
}

#content .comments .dynamic {
	border-bottom: 1px solid rgb(93, 67, 72);
}

#content .comments .dynamic .top {
	position: relative;
	display: flex;
}

#content .comments .dynamic .top img:nth-of-type(1) {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-left: 15px;
}

#content .comments .dynamic .top img:nth-of-type(2) {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	position: absolute;
	top: 36px;
	left: 50px;
}

#content .comments .dynamic .top div {
	font-size: 14px;
	margin-top: 15px;
	margin-left: 10px;
}

#content .comments .dynamic .copy {
	display: flex;
	margin: 20px auto;
	overflow: hidden;
	/*   resize: horizontal; */
	border-radius: 8px;
	padding: 15px 0 0px;
	margin-left: 25px;
	margin-right: 25px;
}

#content .comments .dynamic .copy .text {
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: justify;
	/* display: flex; */
	/*   display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; */
	position: relative;
	line-height: 1.5;
	max-height: 7.5em;
	transition: .3s max-height;
}

#content .comments .dynamic .copy .btn {
	cursor: pointer;
}

#content .comments .dynamic .text::before {
	content: '';
	height: calc(100% - 26px);
	float: right;
}

#content .comments .dynamic .copy .btn {
	position: relative;
	float: right;
	clear: both;
	margin-left: 10px;
	font-size: 14px;
	padding: 0 8px;
	line-height: 24px;
	color: #000;
	cursor: pointer;
}

#content .comments .dynamic .copy .btn::after {
	content: '查看全文';
	color: rgb(107, 118, 150);
}

#exp:checked+.text .btn::after {
	content: '收起'
}

#content .comments .dynamic .copy .exp {
	display: none;
}

#content .comments .dynamic .copy .exp:checked+.text {
	max-height: none;
}

#content .comments .dynamic .copy .exp:checked+.text::after {
	visibility: hidden;
}

#content .comments .dynamic .copy .exp:checked+.text .btn::before {
	visibility: hidden;
}

#content .comments .dynamic .copy .exp:checked+.text .btn::after {
	content: '收起';
	color: rgb(107, 118, 150);
}

#content .comments .dynamic .copy .btn::before {
	content: '...';
	position: absolute;
	left: -5px;
	color: #333;
	transform: translateX(-100%)
}

#content .comments .dynamic a {
	margin-left: 25px;
	font-size: 12px;
	color: rgb(107, 118, 150);
}

#content .comments .dynamic .imageShow {
	display: flex;
}

#content .comments .dynamic .imageShow img {
	width: 300px;
	height: 300px;
	margin-left: 25px;
}

#content .comments .dynamic .van-row:nth-last-of-type(1) .van-col {
	font-size: 12px;
	text-align: center;
	color: #fff;
	height: 4vh;

}

#content .bottom {
	height: 8vh;
}
</style>
